<template>
  <el-dialog
    title="选择人员"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="80%"
  >
    <!-- <div>
      <el-button type="success" size="mini" @click="hanlleAdd()"
        >新增</el-button
      >
      <el-button type="danger" size="mini" @click="handleDelete()"
        >批量删除</el-button
      >
      <el-button @click="handleReset()" size="mini" type="info"
        >EXCEL上传</el-button
      >
      <el-button @click="downLoad()" size="mini" type="primary"
        >模板下载</el-button
      >
    </div> -->
    <div>
      <el-card class="box-card">
        <el-form :inline="true" :model="dataForm" class="dadeFrom">
          <el-input
            v-model="dataForm.staffAccount"
            placeholder="推送人员工号"
            style="width: 200px"
            clearable
          ></el-input>
          <el-input
            v-model="dataForm.FieldValue"
            placeholder="字段值名称"
            style="width: 200px"
            clearable
          ></el-input>

          <el-button @click="searchData()" type="primary">查询</el-button>
          <el-button @click="handleReset()" type="primary">重置</el-button>
        </el-form>
      </el-card>
      <el-card class="box-card" style="margin-top: 10px">
        <el-button type="success" size="mini" @click="hanlleAdd()"
          >新增</el-button
        >
        <el-button type="danger" size="mini" @click="handleDelete()"
          >批量删除</el-button
        >
        <!-- <el-button type="danger" size="mini" @click="handleDelete()"
          >{{groupId}}</el-button> -->
        <!-- <el-button @click="handleUpload()" size="mini" type="info"
          >EXCEL上传</el-button
        > -->
        <el-upload
          style="display: inline-block; line-height: 28px"
          name="file"
          ref="upload"
          :multiple="true"
          :show-file-list="false"
          :onError="uploadError"
          :onSuccess="uploadSuccess"
          :action="actionUp"
          :auto-upload="true"
          :data="iconFileData"
        >
          <el-button style="margin: 0, 10px" type="info" size="mini"
            >EXCEL上传</el-button
          >
        </el-upload>
        <el-button @click="downLoad()" size="mini" type="primary"
          >模板下载</el-button
        >
        <el-table
          :data="dataList"
          style="width: 100%; margin-top: 20px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column type="index" label="序号" align="center">
          </el-table-column>
          <el-table-column prop="field" label="字段" align="center">
          </el-table-column>
          <el-table-column prop="fieldValue" label="字段值" align="center">
          </el-table-column>
          <el-table-column prop="staffName" label="推送人员姓名" align="center">
          </el-table-column>
          <el-table-column
            prop="staffAccount"
            label="推送人员工号"
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="hanlleAdd(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="handleDelete(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination
          :total="total"
          :pageNum="pageNum"
          :pageSize="pageSize"
          @pageChange="pageChange"
        />
      </el-card>
    </div>
    <!-- 新增和编辑 -->
    <!-- <person ref="addorUpdate" @refreshDataList="getPerson"></person> -->
    <!-- 内层弹框 -->
    <el-dialog
      :title="!addForm.id ? '新增' : '编辑'"
      :close-on-click-modal="false"
      :visible.sync="innerVisible"
      append-to-body
      @close="close"
      width="30%"
    >
      <el-form
        :model="addForm"
        :rules="dataRule"
        ref="addForm"
        @keyup.enter.native="dataFormSubmit()"
        label-width="115px"
      >
        <el-form-item label="群组ID" prop="groupId">
          <el-input
            v-model="addForm.groupId"
            disabled="disabled"
            style="width: 300px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="字段" prop="field">
          <el-input
            v-model="addForm.field"
            placeholder="请输入字段"
            style="width: 300px"
            clearable
            @input="change($event)"
          ></el-input>
        </el-form-item>
        <el-form-item label="字段值" prop="fieldValue">
          <el-input
            v-model="addForm.fieldValue"
            placeholder="请输入字段值"
            style="width: 300px"
            clearable
            @input="change($event)"
          ></el-input>
        </el-form-item>
        <el-form-item label="推送人员" prop="staffName">
          <el-input
            v-model="addForm.staffName"
            placeholder="请输入推送人员"
            style="width: 300px"
            clearable
            @input="change($event)"
          ></el-input>
        </el-form-item>
        <el-form-item label="推送人员工号" prop="staffAccount">
          <el-input
            v-model="addForm.staffAccount"
            placeholder="请输入推送人员工号"
            style="width: 300px"
            clearable
            @input="change($event)"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="visible = false">取消</el-button> -->
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
import person from "./person-add-or-update";
export default {
  data() {
    return {
      dialogVisible: false,
      innerVisible: false,
      action: "",
      actionUp: "",
      iconFileData: {
        //文件上传所需要的参数
        groupId: "",
      },
      pageNum: 1,
      pageSize: 10,
      total: 0,
      addForm: {
        groupId: "",
        id: 0,
        field: "",
        fieldValue: "",
        staffName: "",
        staffAccount: "",
      },
      dataForm: {
        title: "", //标题
        userKeyword: "", //关键字
        createTime: "", //创建时间
        staffAccount: "", //推送人员工号
        FieldValue: "", //推送人员架构名称
      },
      ids: [],
      dataList: [],
      dataRule: {
        field: [{ required: true, message: "字段不能为空", trigger: "blur" }],
        fieldValue: [
          { required: true, message: "字段值不能为空", trigger: "blur" },
        ],
        staffName: [
          { required: true, message: "推送人不能为空", trigger: "blur" },
        ],
        staffAccount: [
          { required: true, message: "推送人工号不能为空", trigger: "blur" },
        ],
      },
    };
  },
  components: {
    person,
  },
  computed: {
    groupId: {
      get() {
        return this.$store.state.user.groupId;
      },
    },
  },
  activated() {},
  created() {
    this.action = this.$http.adornUrl(`staffConfig/downFile?type=0`);
    this.actionUp = this.$http.adornUrl(
      `staffConfig/importDate?token=${this.$cookie.get("token")}`
    );
    // alert(this.actionUp)
    // this.getPerson()
  },
  methods: {
    //人员配置列表
    getPerson() {
      this.dialogVisible = true;
      // console.log("id", id);
      this.addForm.groupId = this.groupId;
      this.iconFileData.groupId = this.groupId;
      console.log("this.addForm.groupId", this.addForm.groupId);
      console.log("this.iconFileData.groupId", this.iconFileData.groupId);
      console.log(
        "this.iconFileData.groupId",
        typeof this.iconFileData.groupId
      );
      this.$http({
        url: this.$http.adornUrl(`staffConfig/list`),
        method: "get",
        params: this.$http.adornParams({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          groupId: this.addForm.groupId,
          staffAccount: this.dataForm.staffAccount,
          FieldValue: this.dataForm.FieldValue,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.data.records;
          this.total = data.data.total;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //右上角叉号事件
    close() {
      this.addForm = {};
      this.$refs.addForm.clearValidate();
    },
    // 多选
    handleSelectionChange(val) {
      this.ids = [];
      val.map((item) => {
        this.ids.push(item.id);
      });
    },
    // 分页
    pageChange(page) {
      this.pageSize = page._pageSize;
      this.pageNum = page._currentPage;
      this.getPerson();
    },
    // 点击搜索
    searchData() {
      this.getPerson();
    },
    //点击新增，修改
    hanlleAdd(data) {
      this.innerVisible = true;
      console.log("data", data);
      this.addForm.id = data || 0;
      console.log("this.addForm.id", this.addForm.id);
      this.visible = true;
      if (this.addForm.id === 0) {
        // this.addForm = {};
        this.addForm.groupId = this.groupId;
      } else {
        let obj = JSON.parse(JSON.stringify(data));
        console.log("obj", obj);
        (this.addForm.groupId = obj.groupId), (this.addForm.field = obj.field);
        this.addForm.fieldValue = obj.fieldValue;
        this.addForm.staffAccount = obj.staffAccount;
        this.addForm.staffName = obj.staffName;
      }
      console.log("this.addForm.groupId==", this.addForm.groupId);
      // this.$nextTick(() => {
      //   this.$refs.addorUpdate.init(data);
      // });
      //   this.id = null;
      //   this.form.groupName = "";
      //   this.form.groupNum = "";
      //   this.form.remark = "";
      //   this.dialogVisible = true;
    },
    //内层弹框的新增和编辑
    dataFormSubmit() {
      console.log(this.addForm);

      let id = "";
      if (this.addForm.id === 0) {
        id = "";
      } else {
        id = this.addForm.id.id;
      }
      console.log("this.addForm.id", id);
      // return
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `staffConfig/${!this.addForm.id ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              id: id,
              groupId: this.addForm.groupId,
              field: this.addForm.field,
              fieldValue: this.addForm.fieldValue,
              staffName: this.addForm.staffName,
              staffAccount: this.addForm.staffAccount,
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.innerVisible = false;
                  this.getPerson();
                  // this.$emit("refreshDataList");
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    //重置
    handleReset() {
      this.dataForm.staffAccount = "";
      this.dataForm.FieldValue = "";
      this.getPerson();
    },
    change(e) {
      this.$forceUpdate();
    },
    // 删除
    handleDelete(id) {
      let ids = [];
      if (id) {
        ids = [id];
      } else {
        ids = this.ids;
        if (ids.length == 0) {
          this.$message.error("请先选择要删除的选项");
          return false;
        }
      }
      console.log(ids);
      // return
      this.$confirm(`您确定要删除吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("staffConfig/delete"),
            method: "post",
            data: this.$http.adornData({ ids: ids }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getPerson();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    //excel上传
    // 上传成功(热门文章)
    uploadSuccess(response, file, fileList) {
      console.log("11111111111", response);
      console.log("11111111111", file);
      console.log("11111111111", fileList);
      if (response.code === 500) {
        this.$message.error(response.msg);
      } else {
        this.$message.success("上传成功");
        this.getPerson();
      }
    },
    // 上传失败(热门文章)
    uploadError(response, file, fileList) {
      console.log("2222222222222222");
      console.log("2222222222222222", response);
      console.log("2222222222222222", file);
      console.log("2222222222222222", fileList);
      this.$message.error("上传失败，请联系管理员");
    },
    //模板下载
    downLoad() {
      console.log("sssss");
      console.log(this.action);
      //   return
      window.open(this.action);
    },
  },
};
</script>

<style scoped>
</style>